<template>
  <div>
    <el-row v-if="targetData.now&&targetData.now.localSpendAmount? targetData.now.localSpendAmount : ''" :gutter="24">
      <template v-for="(item,index) in echartsOptions">
        <el-col :span="6" :style=" index<4?'margin-bottom: 60px;':''">
          <div class="box-card" style="border-right: 1px solid #EEEEEE;">
            <div slot="header" class="header">
              <span v-if="item.name!=='CPT'&&item.name!=='CPA'&&item.name!=='CPM'" class="title webfont-Medium">{{ item.name==='下载'?'安装':item.name }}</span>
              <span v-else class="title webfont-Medium">
                <!-- {{ item.name }} -->
                平均{{ item.name==='CPA'?'每次转化':item.name==='CPT'?'每次点击':'每千次展示费用' }}{{ '费用'+`(${item.name})` }}
              </span>
            </div>

            <div class="box-main">
              <!--大数字开始 -->

              <!-- 总和 -->
              <template v-if="info.now[item.val]!==null&&index<6">
                <countTo
                  v-if="index<1||index>3"
                  :start-val="0"
                  :end-val="info.now[item.val]*1"
                  :duration="1500"
                  :prefix="item.fix==='$'?unitTxt:''"
                  class="main-num Roboto-Bold"
                  :suffix="item.fix==='%'?'%':''"
                  :decimals="2"
                />

                <countTo
                  v-else
                  :start-val="0"
                  :end-val="info.now[item.val]*1"
                  :duration="1500"
                  :prefix="item.fix==='$'?unitTxt:''"
                  class="main-num Roboto-Bold"
                  :suffix="item.fix==='%'?'%':''"
                  :decimals="0"
                />

              </template>

              <!-- 每次 -->
              <template v-if="info.now[item.val]!==null&&index>=6">
                <countTo
                  :start-val="0"
                  :end-val="info.now[item.val]*100"
                  :duration="1500"
                  :prefix="item.fix==='$'?unitTxt:''"
                  class="main-num webfont-Heavy"
                  :suffix="item.fix==='%'?'%':''"
                  :decimals="2"
                />
              </template>
              <!--大数字结束 -->

              <!-- 底部开始 -->
              <div class="ring ">
                <!-- 日均 -->
                <p v-if="index<4">
                  <el-tooltip class="item" effect="dark" :content="timeArr[0]+'至'+timeArr[1]+'的日均值'" placement="top">
                    <span class=" pointer ">日均{{ item.name }}</span>
                  </el-tooltip>

                  <countTo
                    v-if="targetData.now"
                    :start-val="0"
                    :end-val="setPingJun(item)"
                    :duration="1500"
                    :decimals="2"
                    class="num"
                  />
                </p>

                <!-- 计算环比 -->
                <p class="total">
                  <huang-bi
                    :new-val="targetData.now[item.val]*1"
                    :old-val="targetData.old[item.val]*1"
                    title="环比"
                    :content="'对比'+lastCycle[0]+'至'+lastCycle[1]"
                  ></huang-bi>
                </p>

                <!-- 计算日环比 -->
                <!-- <p v-if="index>=4&&dayRingShow()" class="day">
                  <huang-bi
                    :new-val="targetData.yesterday[item.val]*1"
                    :old-val="targetData.dayBeforeYesterday[item.val]*1"
                    title="日环比"
                    :content="'昨日对比'+beforeYesterday"
                  ></huang-bi>

                </p> -->

              </div>

            </div>

          </div>
        </el-col>
      </template>

    </el-row>

  </div>
</template>

<script>
import countTo from 'vue-count-to'
import huangBi from '@/components/huangBi/index.vue'
import dayjs from 'dayjs'
const moment = dayjs
import {
  getsLastPeriod,
  getBeforeYes,
  includeTime
} from '@/utils/moment.js'
import {
  echartsOptions
} from '@/settings.js'
export default {
  components: {
    countTo,
    huangBi
  },
  props: {

    timeArr: { // 开始时间
      default: () => {
        return ['2020-9-16,2021-12-15']
      },
      type: Object
    },

    targetData: {
      default: () => {
        return {
          dayBeforeYesterday: {},
          now: {},
          old: {},
          yesterday: {}
        }
      },
      type: Object
    },

    adchannelType: {
      type: String,
      default: () => {
        return 'SEARCH'
      }
    }
  },
  data() {
    return {
      contentTitle: '',
      startTime: undefined,
      endTime: undefined
    }
  },
  computed: {

    echartsOptions() {
      const arr = echartsOptions.map(item => {
        if (item.val === 'avgCptAmount' && this.adchannelType === 'DISPLAY') {
          return {
            name: 'CPM',
            val: 'avgCpmAmount',
            fix: '$'
          }
        } else {
          return item
        }
      })

      return arr
    },

    unitTxt() {
      const unit = this.$store.state.user.unit
      if (unit === 'USD') {
        return '$'
      } else {
        return '￥'
      }
    },
    // 上个周期的值
    lastCycle() {
      const that = this
      if (this.timeArr.length) {
        return getsLastPeriod(this.timeArr)
      }
    },
    beforeYesterday() {
      return getBeforeYes()
    }
  },

  watch: {
    targetData: {
      deep: true,
      immediate: true,
      handler: function(newval, oldval) {
        this.info = newval
      }
    },
    timeArr: {
      deep: true,
      handler: function(newval, oldval) {
        this.startTime = moment(newval[0]).format('YYYY-MM-DD')
        this.end = moment(newval[1]).format('YYYY-MM-DD')
      }
    }
  },

  mounted() {

  },

  methods: {
    dayRingShow() {
      return includeTime(this.timeArr[1])
    },
    // 算出平均的方法
    setPingJun(item) {
      if (this.targetData.result.length) {
        const key = item.val
        const total = this.targetData.now[key]

        const length = this.targetData.result[0].date.length > 10 ? this.targetData.result.length / 24 : this.targetData
          .result.length

        if (total * 100 === 0 || length * 100 === 0) {
          return 0.00
        } else {
          const num = (total * 100) / (length * 100)

          return num.toFixed(2)
        }
      } else {
        return 0.00
      }
    },

    // 算出环比的方法
    setRing(item) {
      if (this.targetData.result.length) {
        const key = item.val
        const now = this.targetData.now[key] * 1 // 这个周期的总和数
        const old = this.targetData.old[key] * 1 // 上次周期的总和数

        // 如果上个周期是0
        if (old * 100 === 0) {
          if (now * 100 === 0) {
            // 如果这个周期也是0  那就是0增长
            return 0.00
          } else {
            // 如果上个周期为0  这个周期有数据则为+100%
            return 100
          }
        } else {
          // 如果上个周期数据不是0
          if (now * 100 === 0) {
            return (old * 100).toFixed(2)
          } else {
            const num = ((now * 100) - (old * 100)) / (now * 100)
            return (num * 100).toFixed(2)
          }
        }
      } else {
        return 0.00
      }
    },
    // 算出日环比的方法
    setDayRing(item) {
      // 日环比增长率=(昨天-前天)/前天数*100%
      if (this.targetData.result.length) {
        const key = item.val
        const now = this.targetData.yesterday[key] * 1 // 昨天的总和数据
        const old = this.targetData.dayBeforeYesterday[key] * 1 // 前天的总和数据

        // 如果上个周期是0
        if (old * 100 === 0) {
          if (now * 100 === 0) {
            // 如果这个周期也是0  那就是0增长
            return 0.00
          } else {
            // 如果上个周期为0  这个周期有数据则为+100%
            return 100
          }
        } else {
          // 如果上个周期数据不是0
          if (now * 100 === 0) {
            return (old * 100).toFixed(2)
          } else {
            const num = ((now * 100) - (old * 100)) / (now * 100)
            return (num * 100).toFixed(2)
          }
        }
      } else {
        return 0.00
      }
    }
  }
}
</script>

<style lang="scss" scoped="true">
  .el-row::v-deep .el-col {
    &:nth-of-type(4n) {
      .box-card {
        border: none !important;
        padding-right: 1rem;
      }
    }
  }

  .box-card {
    padding-right: 2rem;

    ::v-deep.el-card__header {
      border: none !important;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .title {
        font-size: 14px;
        line-height: 14px;
        color: rgba(51, 64, 74, 0.8);

      }

      i {
        font-size: 20px;
        border-radius: 50%;
      }
    }

    ::v-deep .el-card__body {
      padding-top: 0;
    }

    .box-main {
      ::v-deep.main-num {
        color: rgba(0, 0, 0, 0.85);
        font-weight: 800;
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 20px;
      }

      .ring {

        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        padding-top: 20px;

        p {
          display: flex;
          align-items: center;
        }

        span {
          color: rgba(172, 182, 194, 1);
          padding-right: 10px;
        }

        strong,
        .num {
          padding-right: 8px;
          font-weight: normal;
          color: rgba(57, 68, 78, 1);
        }

        .bottom {
          color: #24BEBE;
        }

        .top {
          color: #E9716A;
        }
      }

    }

    .box-footer {
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 14px;
      border-top: 1px solid #ddd;
      margin-top: 14px;

      p {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 18px;

        span {
          margin-right: 18px;
          color: rgba(0, 0, 0, 0.45);
        }

        ::v-deep.num {
          color: rgba(0, 0, 0, 0.85);
        }
      }
    }
  }
</style>
